<template>
  <div class="data-v-menu3" @mouseover="onMouseOver" @mouseout="onMouseOut">
    <div class="menu-list">
      <div class="menu-item" v-for="(item, index) in menuList" :key="index" :style="getItemStyle(index)"
        ref="menu-item">
        <img src="./img/iconMenu.png" :alt="item.name" width="13" height="13" />
        <span style="margin-top: 5px">{{ item.name }} </span>
        <!-- {{ item.name }} -->
      </div>
    </div>
    <div class="radar" ref="radar"></div>
  </div>
</template>

<script>
import { toRad } from "../utils";
export default {
  name: "data-v-menu3",
  props: ["color", "activeColor", "menuList"],

  data() {
    return {
      isHover: true
    };
  },

  mounted() {
    this.doms = this.$refs["menu-item"];
    this.startDraw(this.doms);
  },

  beforeDestroy() {
    cancelAnimationFrame(this.timer);
  },

  methods: {
    getItemStyle(index) {
      let length = this.menuList.length;
      let angle = (index / length) * 360;
      return this.getStyleByAngle(angle);
    },

    getStyleByAngle(angle) {
      // 容器宽度
      let w = 280;
      let r = w / 2 - 30;

      // 每一项的宽度
      let itemWidth = 60;

      let x = r * Math.cos(toRad(angle)) + w / 2 - itemWidth / 2;
      let y = r * Math.sin(toRad(angle)) + w / 2 - itemWidth / 2;

      return {
        left: x + "px",
        top: y + "px"
      };
    },

    onMouseOver() {
      cancelAnimationFrame(this.timer);
    },
    onMouseOut() {
      this.startDraw(this.doms);
    },

    startDraw(doms) {
      let length = this.menuList.length;
      let speed = 0.3;
      if (!this.angles) {
        this.angles = new WeakMap();
      }

      // const setAngle = (dom) => {
      //    let radarDom = this.$refs.radar;
      //   let oldAngle = this.angles.get(radarDom);
      //   let radarAngle = 0;
      //   if (oldAngle !== undefined) {
      //     radarAngle = oldAngle;
      //   }
      //   radarAngle += speed;
      //   this.angles.set(radarDom, radarAngle);
      // }

      const drawFrame = () => {
        doms.forEach((dom, index) => {
          let oldAngle = this.angles.get(dom);
          let angle = (index / length) * 360;
          if (oldAngle !== undefined) {
            angle = oldAngle;
          }

          angle += speed;
          this.angles.set(dom, angle);
          let style = this.getStyleByAngle(angle);
          dom.style.left = style.left;
          dom.style.top = style.top;
        });

        let radarDom = this.$refs.radar;
        let oldAngle = this.angles.get(radarDom);
        let radarAngle = 0;
        if (oldAngle !== undefined) {
          radarAngle = oldAngle;
        }
        radarAngle += speed;
        if (radarAngle >= 360) {
          radarAngle = 0;
        }
        this.angles.set(radarDom, radarAngle);
        radarDom.style.transform = `rotate(${radarAngle}deg)`;

        this.timer = requestAnimationFrame(drawFrame);
      };
      drawFrame();
    }
  }
};
</script>

<style lang="less">
.data-v-menu3 {
  width: 280px;
  height: 280px;
  // outline: 1px solid lightblue;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .menu-list {
    width: 100%;
    height: 100%;
    position: absolute;
    flex: 1;
  }

  .menu-item {
    width: 60px;
    height: 60px;
    // outline: 1px solid lightgreen;
    position: absolute;
    background: url(./img/isgon6.png) center center no-repeat;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;

    cursor: pointer;
  }

  // .item-rotate {
  //   animation: irotate 20s infinite linear forwards;
  // }

  // @keyframes irotate {
  //   0% {
  //     transform: rotate(0);
  //   }
  //   100% {
  //     transform: rotate(360deg);
  //   }
  // }

  .radar {
    width: 220px;
    height: 202px;
    background: url(./img/radar.png) center center no-repeat;
  }
}
</style>
